<template>
  <div class="container">
    <h2 class="text-center mb-4">学生管理系统</h2>
    
    <div class="row mb-4">
      <div class="col-md-6">
        <button class="btn btn-primary" @click="openAddModal">添加学生</button>
      </div>
      <div class="col-md-6">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="搜索学生..." v-model="searchQuery">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" @click="searchStudents">搜索</button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="table-responsive">
      <table class="table table-striped table-bordered">
        <thead class="thead-dark">
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>班级</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="student in students" :key="student.id">
            <td>{{ student.id }}</td>
            <td>{{ student.name }}</td>
            <td>{{ student.age }}</td>
            <td>{{ student.gender }}</td>
            <td>{{ student.className }}</td>
            <td>
              <button class="btn btn-warning btn-sm mr-2" @click="openEditModal(student)">编辑</button>
              <button class="btn btn-danger btn-sm" @click="deleteStudent(student.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <!-- 添加学生模态框 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addModalLabel">添加学生</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form @submit.prevent="addStudent">
              <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" class="form-control" id="name" v-model="newStudent.name" required>
              </div>
              <div class="form-group">
                <label for="age">年龄</label>
                <input type="number" class="form-control" id="age" v-model="newStudent.age" required>
              </div>
              <div class="form-group">
                <label for="gender">性别</label>
                <select class="form-control" id="gender" v-model="newStudent.gender" required>
                  <option value="男">男</option>
                  <option value="女">女</option>
                </select>
              </div>
              <div class="form-group">
                <label for="className">班级</label>
                <input type="text" class="form-control" id="className" v-model="newStudent.className" required>
              </div>
              <button type="submit" class="btn btn-primary">保存</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 编辑学生模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="editModalLabel">编辑学生</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form @submit.prevent="updateStudent">
              <input type="hidden" v-model="currentStudent.id">
              <div class="form-group">
                <label for="editName">姓名</label>
                <input type="text" class="form-control" id="editName" v-model="currentStudent.name" required>
              </div>
              <div class="form-group">
                <label for="editAge">年龄</label>
                <input type="number" class="form-control" id="editAge" v-model="currentStudent.age" required>
              </div>
              <div class="form-group">
                <label for="editGender">性别</label>
                <select class="form-control" id="editGender" v-model="currentStudent.gender" required>
                  <option value="男">男</option>
                  <option value="女">女</option>
                </select>
              </div>
              <div class="form-group">
                <label for="editClassName">班级</label>
                <input type="text" class="form-control" id="editClassName" v-model="currentStudent.className" required>
              </div>
              <button type="submit" class="btn btn-primary">更新</button>
              <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [],
      newStudent: { name: '', age: '', gender: '男', className: '' },
      currentStudent: { id: '', name: '', age: '', gender: '男', className: '' },
      searchQuery: ''
    }
  },
  mounted() {
    this.getStudents();
  },
  methods: {
    getStudents() {
      fetch('http://localhost:8081/api/students')
        .then(response => response.json())
        .then(data => this.students = data)
        .catch(error => console.error('Error:', error));
    },
    addStudent() {
      fetch('http://localhost:8081/api/students', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(this.newStudent),
      })
      .then(response => response.json())
      .then(data => {
        this.getStudents();
        this.newStudent = { name: '', age: '', gender: '男', className: '' };
        $('#addModal').modal('hide');
      })
      .catch(error => console.error('Error:', error));
    },
    openEditModal(student) {
      this.currentStudent = { ...student };
      $('#editModal').modal('show');
    },
    openAddModal() {
      this.newStudent = { name: '', age: '', gender: '男', className: '' };
      $('#addModal').modal('show');
    },
    updateStudent() {
      fetch(`http://localhost:8081/api/students/${this.currentStudent.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(this.currentStudent),
      })
      .then(response => response.json())
      .then(data => {
        this.getStudents();
        $('#editModal').modal('hide');
      })
      .catch(error => console.error('Error:', error));
    },
    deleteStudent(id) {
      if (confirm('确定要删除这个学生吗？')) {
        fetch(`http://localhost:8081/api/students/${id}`, {
          method: 'DELETE'
        })
        .then(() => this.getStudents())
        .catch(error => console.error('Error:', error));
      }
    },
    searchStudents() {
      if (!this.searchQuery) {
        this.getStudents();
        return;
      }
      
      // 这里应该根据实际后端API实现搜索逻辑
      // 简化示例，前端过滤
      const filteredStudents = this.students.filter(student => 
        student.name.includes(this.searchQuery) ||
        student.className.includes(this.searchQuery)
      );
      this.students = filteredStudents;
    }
  }
}
</script>

<style scoped>
.container {
  margin-top: 20px;
}
</style>    